<!-- 出库登记详情 -->
<template>
  <div>
    <cus-search>
      <cus-search-item>
        <Form
          :model="form"
          :label-width="100"
          @keydown.native.enter.prevent="onInit"
        >
          <FormItem label="领用单位" :label-width="80" class="mr_48 mb_20">
            <Input
              v-model="this.$route.query.recipientDepartmentName"
              disabled
              placeholder="暂无领用单位"
            />
          </FormItem>
          <FormItem
            label="出库单号"
            class="mr_48 mb_20"
          >
            <Input
              v-model="this.$route.query.storageNo"
              disabled
              placeholder="暂无领用单号"
            />
          </FormItem>
          <FormItem label="验收员" :label-width="80" class="mr_48 mb_20">
            <Input
              v-model="this.$route.query.checkByName"
              disabled
              placeholder="暂无验收员"
            />
          </FormItem>
          <FormItem label="领用仓库" class="mr_48 mb_20">
            <Select
              placeholder="全部"
              clearable
              @on-change="postApiGoodsOutStockBillGetApi()"
              v-model="form.stockId"
              style="width: 189px"
            >
              <Option
                v-for="item in storehouseTree"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="物资名称" :label-width="80" class="mr_48 mb_20">
            <Input
              v-model="form.productName"
              placeholder="请输入物资名称"
            />
            </FormItem>
            <cusButton
            class="ml_20 mr_20 mb_20"
            type="primary"
            @onClick="onSearch"
            >查询</cusButton
          >
          <cusButton
            class="ml_20 mr_20 mb_20"
            type="primary"
            v-if="isFlag"
            @onClick="onAdd"
            >添加明细</cusButton
          >
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card style="margin-top: 20px; padding-top: 20px" :showTitle="false">
      <cusTable
        border
        :loading="form.loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page','cus_operBox']"
      >
        <template slot-scope="{ row }" slot="deliveDateOperation">
          <div style="display:flex;justify-content: center;">
            <div
              @click="onShowImg(row)"
              v-if="row.image"
              style="height:40px;width:80px;"
            >
              <img :src="row.image" alt="" style="height:100%;width:100%;" />
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="operation">
          <div class="flex">
            <cus-button
              type="text"
              size="small"
              v-if="row.entities != null && row.entities.length > 0"
              :style="{
                color: '#1E6FFF'
              }"
              style="padding: 0 5px"
              @onClick="onShow(row)"
            >
              <Icon type="ios-search" size="4" style="margin: 2px 3px 0 0" />
              <span>查看</span>
            </cus-button>
            <!-- <cus-button
              type="text"
              size="small"
              v-if="isFlag"
              :style="{
                color: '#1E6FFF',
              }"
              style="padding: 0 5px"
              @onClick="onEdit(row)"
            >
              <Icon
                type="md-color-filter"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>编辑</span>
            </cus-button> -->
            <cus-button
              type="text"
              size="small"
              v-if="isFlag"
              :style="{
                color: '#1E6FFF'
              }"
              style="padding: 0 5px"
              @onClick="onDelete(row)"
            >
              <Icon
                type="ios-trash-outline"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>删除</span>
            </cus-button>
          </div>
        </template>
      </cusTable>
      <div class="cus_page">
        <cus-page
          :data="pages"
          class="mt_20"
          @pageChange="postApiGoodsOutStockBillGetApi()"
        ></cus-page>
      </div>
    </cus-card>
    <!--底部提交，返回-->
    <div class="cus_operBox" style="width: calc(100% - 250px)">
      <Button type="error" class="mr_20" @click="onReturn">返回</Button>
    </div>
    <!--手工出库物资登记Modal -->
    <outboundRegistration
      ref="outboundRegistration"
      :flag="true"
    ></outboundRegistration>
    <!--出库登记详情-查看-->
    <outDeliveryDetailsView
      ref="outDeliveryDetailsView"
    ></outDeliveryDetailsView>
    <!--查看图片-->
    <Modal v-model="showModal" width="800" title="查看图片">
      <div style="display: flex; justify-content:center;">
        <img :src="image" v-if="image" alt="" style="height:100%;width:100%;"/>
        <div v-else style="text-align:center;">暂无图片</div>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  postApiGoodsOutStockBillGet,
  postApiGoodsOutStockBillDeletepooutstockbill,
  getBasstockList,
  getOutStockBillCanModify
} from "@/api/business/manager";
import outboundRegistration from "./outboundRegistration.vue";
import outDeliveryDetailsView from "./outDeliveryDetailsView.vue";

export default {
  components: { outboundRegistration, outDeliveryDetailsView },
  data() {
    return {
      form: {
        stockId: "", // 仓库id
        loading: false,
        productName: "", //物资名称
      },
      checkStatus: null,
      image: "", //图片
      showModal: false,
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          minWidth: 70
        },
        {
          title: "物资名称",
          key: "productName",
          align: "center",
          minWidth: 105
        },
        {
          title: "领用仓库",
          key: "stockName",
          align: "center",
          minWidth: 75
        },
        {
          title: "领用人",
          key: "collectPersonnel",
          align: "center",
          minWidth: 75
        },
        {
          title: "计量单位",
          key: "packagingUtil",
          align: "center",
          minWidth: 75
        },
        {
          title: "验收数量",
          key: "packagingQty",
          align: "center",
          minWidth: 75
        },
        {
          title: "单位重量(Kg)",
          key: "unitWeight",
          align: "center",
          minWidth: 145
        },
        {
          title: "单价(元)",
          key: "packagingPrice",
          align: "center",
          minWidth: 75
        },
        {
          title: "总金额(元)",
          key: "amount",
          align: "center",
          minWidth: 95
        },
        {
          title: "最新验收时间",
          key: "createTime",
          align: "center",
          minWidth: 175
        },
        {
          title: "出库照片",
          slot: "deliveDateOperation",
          align: "center",
          minWidth: 105
        },
        {
          title: "操作",
          fixed: "right", // 右侧固定
          slot: "operation",
          align: "center",
          width: 175
        }
      ],
      data: [], // 表格列表
      storehouseTree: [], // 存储仓库Tree数据
      isFlag: false,
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      tableHeight: 0
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 370; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.postApiGoodsOutStockBillGetApi();
    this.getBasstockListApi();
    this.getOutStockBillCanModifyApi();
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 370; // 表格自适应高度
      }, 100);
    },
    // 添加明细
    onAdd() {
      this.$refs[
        "outboundRegistration"
      ].caiGouBillNo = this.$route.query.storageNo;
      this.$refs["outboundRegistration"].show();
    },
    // 查询
    onSearch() {
       this.pages.page = 1
       this.postApiGoodsOutStockBillGetApi();
    },
    // 编辑
    onEdit(row) {
      console.log(row);
      this.$refs[
        "outboundRegistration"
      ].getGoodsSelectBasSpecificationListApi(); //获取规格select数据
      this.$refs["outboundRegistration"].showForm.packagingUtil = JSON.parse(
        JSON.stringify(row.packagingUtil)
      ); //规格
      this.$refs["outboundRegistration"].showForm.unitWeight = JSON.parse(
        JSON.stringify(row.unitWeight)
      ); //单位重量
      this.$refs["outboundRegistration"].showForm.packagingPrice = JSON.parse(
        JSON.stringify(row.packagingPrice)
      ); //价格
      this.$refs["outboundRegistration"].showForm.id = JSON.parse(
        JSON.stringify(row.id)
      );
      this.$refs["outboundRegistration"].showForm.productName = JSON.parse(
        JSON.stringify(row.productName)
      ); //物资名称
      this.$refs["outboundRegistration"].showForm.productId = JSON.parse(
        JSON.stringify(row.productId)
      ); //商品id
      this.$refs["outboundRegistration"].showForm.poinventroyId = JSON.parse(
        JSON.stringify(row.poinventroyId)
      ); //物资id
      this.$refs["outboundRegistration"].showForm.stockId = JSON.parse(
        JSON.stringify(row.stockId)
      ); // 仓库id
      this.$refs["outboundRegistration"].showForm.outWeight = JSON.parse(
          JSON.stringify(row.packagingQty)
        ); //出库数量
      if (row.packagingUtil == "公斤" || row.packagingUtil == "斤") {
        this.$refs["outboundRegistration"].flagModal = true; //如果规格为公斤和斤默认显示重量(公斤,斤)
        // this.$refs["outboundRegistration"].isFlagModal = true; //用于判断选中规格后展示重量还是数量
        // this.$refs["outboundRegistration"].showForm.outWeight = JSON.parse(
        //   JSON.stringify(row.weight)
        // ); //出库重量
      } else {
        this.$refs["outboundRegistration"].flagModal = false; //如果规格不为公斤和斤默认显示数量(箱,件)
        // this.$refs["outboundRegistration"].isFlagModal = false; //用于判断选中规格后展示重量还是数量
        // this.$refs["outboundRegistration"].showForm.outWeight = JSON.parse(
        //   JSON.stringify(row.qty)
        // ); //出库数量
      }
      this.$refs["outboundRegistration"].id = row.id;
      this.$refs["outboundRegistration"].isEdit = true; //判断,添加false/编辑接口true
      this.$refs["outboundRegistration"].showModal = true;
      this.$refs["outboundRegistration"].getBasstockListApi();
      //this.$refs["outboundRegistration"].updateGoodsPoinventroyInfoApi(); //编辑出库量获取库存重量
    },
    // 删除
    onDelete(row) {
      this.$cu
        .dialog({
          params: row
        })
        .then(({ id }) => {
          this.postApiGoodsOutStockBillDeletepooutstockbillApi(id);
        });
    },
    // 返回上一页面
    onReturn() {
      window.history.back(); //回退，刷新
    },
    // 查看
    onShow(row) {
      this.$refs["outDeliveryDetailsView"].show();
      this.$refs["outDeliveryDetailsView"].data = row.entities;
      this.$refs["outDeliveryDetailsView"].checkStatus = this.checkStatus;
    },
    onShowImg(row) {
      console.log(row);
      this.image = row.image;
      this.showModal = true;
    },
    // 获取验收出库单详情-------------------接口
    postApiGoodsOutStockBillGetApi() {
      this.form.loading = true;
      return new Promise(resolve => {
        let params = {
          billNo: this.$route.query.storageNo,
          stockId: this.form.stockId,
          current: this.pages.page,
          size: this.pages.pageSize,
          productName: this.form.productName
        };
        postApiGoodsOutStockBillGet(params).then(res => {
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
          }
          resolve();
        });
      });
    },
    // 删除查看详情手工出库物资登记出库量------------------接口
    postApiGoodsOutStockBillDeletepooutstockbillApi(id) {
      this.form.loading = true;
      return new Promise(resolve => {
        postApiGoodsOutStockBillDeletepooutstockbill({
          id
        }).then(res => {
          this.form.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg);
            this.postApiGoodsOutStockBillGetApi();
          }
          resolve();
        });
      });
    },
    // 物资仓库列表----------------接口
    getBasstockListApi() {
      return new Promise(resolve => {
        let params = {
          current: 1,
          size: 1000
        };
        getBasstockList(params).then(res => {
          if (res.retCode == 2000) {
            this.storehouseTree = res.data.records;
            resolve();
          }
        });
      });
    },
    // 判断出库方式是否可以编辑-------------接口
    getOutStockBillCanModifyApi() {
      return new Promise(resolve => {
        let params = {
          id: this.$route.query.id
        };
        getOutStockBillCanModify(params).then(res => {
          if (res.retCode == 2000) {
            // true可编辑，false不可编辑
            this.isFlag = res.data;
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.operBox {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 88px;
  display: flex;
  flex-direction: row-reverse;
  // width: 100%;
  background: #ffffff;
  align-items: center;
  padding: 0 40px;
  box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.12),
    0px -1px 2px -2px rgba(0, 0, 0, 0.16);
}
</style>
